<template>
  <div>
    <!-- 面包屑 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card shadow="hover">
      <!-- 统计 -->
      <div class="cardCount">
        <el-card class="box-card" style="background: #67c23a; color: #f0f0f0">
          <h2>{{ this.taskCount }}</h2>
          <h3>任务总数</h3>
        </el-card>
        <el-card class="box-card" style="background: #e6a23c; color: #f0f0f0">
          <h2>{{ this.taskCompleteCount }}</h2>
          <h3>已完成任务</h3>
        </el-card>
        <el-card class="box-card" style="background: #f56c6c; color: #f0f0f0">
          <h2>{{ this.taskCount - this.taskCompleteCount }}</h2>
          <h3>未完成任务</h3>
        </el-card>
        <el-card class="box-card" style="background: #409eff; color: #f0f0f0">
          <h2>
            {{
              ((this.taskCompleteCount / this.taskCount) * 100)
                | completionRate
            }}%
          </h2>
          <h3>任务完成率</h3>
        </el-card>
      </div>

      <!-- 图表 -->
      <div class="cardContent">
        <el-card class="box-card">
          <div
            id="main"
            style="width: 1200px; height: 430px; margin: 0 auto"
          ></div>
        </el-card>
      </div>
      <!-- 任务动态 -->
      <div class="cardContent">
        <el-card class="box-card box-height">
          <h3 slot="header">最近任务动态</h3>
          <el-table :data="AuditList">
            <el-table-column prop="" label="日期" width="220px">
              <template slot-scope="scope">
                <div>
                  {{ scope.row.createdAt | date }}
                </div>
              </template>
            </el-table-column>

            <el-table-column label="任务名称">
              <template slot-scope="scope">
                <span>
                  {{ scope.row.taskname }}
                </span>
              </template>
            </el-table-column>

            <el-table-column prop="" label="执行人">
              <template slot-scope="scope">
                <span>
                  {{ scope.row.userId.name }}
                </span>
              </template>
            </el-table-column>

            <el-table-column prop="" label="负责人">
              <template slot-scope="scope">
                <span
                  class="worker_item"
                  v-for="(item, index) in scope.row.worker"
                  :key="index"
                >
                  {{ item.name }}
                </span>
              </template>
            </el-table-column>

            <el-table-column label="操作类型">
              <template slot-scope="scope">
                <div v-if="scope.row.operate === 0">提交任务</div>
                <div v-if="scope.row.operate === 1">更新任务</div>
                <div v-if="scope.row.operate === 2">添加任务</div>
                <div v-if="scope.row.operate === 3">删除任务</div>
                <div v-if="scope.row.operate === 4">任务审核通过</div>
                <div v-if="scope.row.operate === 5">打回任务</div>
              </template>
            </el-table-column>

            <el-table-column label="操作" width="150px" align="center">
              <template v-slot="scope">
                <span v-if="scope.row.operate !== 3">
                  <el-button
                    type="success"
                    size="mini"
                    @click="$router.push(`/auditConfirm/${scope.row.taskId}`)"
                    >查看</el-button
                  >
                </span>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </div>
    </el-card>
  </div>
</template>

<script>
import dayjs from "dayjs";
import * as echarts from "echarts/core";
import axios from "axios";
export default {
  filters: {
    date(val) {
      return dayjs(val).format("YYYY-MM-DD HH:mm:ss");
    },
    describe(val) {
      var data = val.split("<h3>")[1].split("</h3>")[0];
      return data;
    },
    completionRate(val) {
      return val.toFixed(2);
    },
  },
  props: {
    id: "",
  },
  data() {
    return {
      AuditList: [],
      queryInfo: {
        status: this.$route.query.status * 1 || 0,
        pagenum: this.$route.query.pagenum * 1 || 1, //第几页
        pagesize: 7, //每页显示个数
      },
      //总条数
      total: 0,
      taskCount: 0,
      taskCompleteCount: 0,
    };
  },
  mounted() {
    this.echart();
  },
  methods: {
    //获取任务动态列表
    async getAuditList() {
      let res = await this.$http.get("/journal/getJournal", {
        params: this.queryInfo,
      });
      let data = res.data;
      if (data.status === 200) {
        this.AuditList = data.data.data;
        this.queryInfo.pagenum = data.data.pagenum;
        this.taskCount = data.data.taskCount;
        this.taskCompleteCount = data.data.taskCompleteCount;
        this.total = data.data.total;
      }
    },

    // 图表
    async echart() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById("main"));
      var seriesData = [];
      var nameData = [];
      var res = await this.$http.get("/other/statistical");
      var data = res.data.data;
      console.log(data);
      // 获取数据
      data.forEach((val) => {
        nameData.push(val.taskname);
        let obj = {};
        var ary = [];
        val.journal.forEach((val1) => {
          ary.push(val1.process);
        });
        obj.name = val.taskname;
        obj.type = "line";
        // obj.stack = "Total";
        (obj.smooth = true), (obj.data = ary);
        seriesData.push(obj);
      });

      // 指定图表的配置项和数据
      var option = {
        title: {
          text: "任务完成率/2021",
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: nameData,
        },
        grid: {
          left: "2%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          name: "月份",
          boundaryGap: false,
          data: [
            "一月",
            "二月",
            "三月",
            "四月",
            "五月",
            "六月",
            "七月",
            "八月",
            "九月",
            "十月",
            "十一月",
            "十二月",
          ],
        },
        yAxis: {
          type: "value",
          name: "进度/%",
          max: 100,
          min: 0,
        },
        series: seriesData,
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },

    //页数改变触发事件
    handleCurrentChange(val) {
      this.queryInfo.pagenum = val;
      this.$router.replace({
        query: {
          status: this.$route.query.status,
          pagenum: val,
        },
      });
      this.getAuditList();
    },

    // 搜索Enter键盘事件
    handleSearch(val) {
      if (val.key == "Enter") {
        this.getAuditList();
      }
    },
  },
  created() {
    this.getAuditList();
  },
};
</script>

<style lang="less" scoped>
.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
}

.cardCount .box-card {
  width: 23%;
  height: 145px;
}

.cardCount {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cardContent {
  margin: 35px 0 0 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cardContent .box-card {
  width: 100%;
  height: 460px;
}

.cardContent .box-height {
  width: 100%;
  height: 100%;
}

h2 {
  margin: 0 0 10px 0;
  font-size: 45px;
}

h3 {
  font-size: 25px;
}
</style>